<template>
	<!-- 促销横幅 -->
	<view class="promo-banner">
	  <swiper class="banner-swiper" indicator-dots autoplay circular indicator-color="rgba(255,255,255,0.4)" indicator-active-color="#fff">
	    <swiper-item>
	      <view class="banner-item banner-1">
	        <view class="banner-content">
	          <text class="banner-title">限时特惠</text>
	          <text class="banner-subtitle">精选零食买二送一</text>
	          <view class="banner-btn">立即抢购</view>
	        </view>
	      </view>
	    </swiper-item>
	    <swiper-item>
	      <view class="banner-item banner-2">
	        <view class="banner-content">
	          <text class="banner-title">新品上市</text>
	          <text class="banner-subtitle">尝鲜价低至5折</text>
	          <view class="banner-btn">查看详情</view>
	        </view>
	      </view>
	    </swiper-item>
	  </swiper>
	</view>
  
  <!-- 调试面板 -->
  <view class="debug-panel" v-if="showDebug">
    <button @click="testImageAccess" size="mini" type="primary">测试图片</button>
    <button @click="testImageInfo" size="mini" type="default">图片信息</button>
    <button @click="downloadImage" size="mini" type="warn">下载图片</button>
  </view>
  
  <!-- 测试图片显示 -->
  <view class="test-image-container" v-if="showTestImage">
    <image 
      class="test-image" 
      :src="testImageSrc" 
      mode="aspectFit"
      @load="onImageLoad"
      @error="onImageError"
    ></image>
    <text class="test-status">状态: {{ testImageStatus }}</text>
    <button @click="showTestImage = false" size="mini" type="default">关闭</button>
  </view>
</template>

<script setup>
import { ref } from 'vue';
import { BASE_URL, getImageUrl } from '@/config/env';

// 是否显示调试面板
const showDebug = ref(true); // 开发时设为true，发布时设为false

// 测试图片状态
const showTestImage = ref(false);
const testImageSrc = ref('');
const testImageStatus = ref('未加载');
const testImagePath = ref('');

// 模拟数据
const products = ref([
  { id: 1, name: 'cola', imageUrl: getImageUrl('/images/product/cola.jpg') },
  { id: 2, name: 'sprite', imageUrl: getImageUrl('/images/product/sprite.jpg') }
]);

// 测试图片访问 - 使用统一的BASE_URL
const testImageAccess = () => {
  const testUrl = `${BASE_URL}/images/product/cola.jpg`;
  console.log('测试访问图片:', testUrl);
  
  // 显示测试图片
  testImageSrc.value = testUrl;
  testImageStatus.value = '加载中...';
  showTestImage.value = true;
  
  // 使用uni.request测试图片访问
  uni.request({
    url: testUrl,
	 header: {
	    'Authorization': 'Bearer your_token_here' // 添加认证头
	  },
    method: 'GET',
    responseType: 'arraybuffer', // 请求二进制数据
    success: (res) => {
      console.log('图片请求成功:', res.statusCode);
      if (res.statusCode === 200) {
        console.log('图片数据长度:', res.data.byteLength);
        uni.showToast({
          title: '图片访问成功',
          icon: 'success'
        });
        testImageStatus.value = '请求成功: ' + res.statusCode;
      } else {
        console.error('图片请求失败:', res.statusCode);
        uni.showToast({
          title: `图片请求失败: ${res.statusCode}`,
          icon: 'none'
        });
        testImageStatus.value = '请求失败: ' + res.statusCode;
      }
    },
    fail: (err) => {
      console.error('图片请求错误:', err);
      uni.showToast({
        title: '图片请求错误',
        icon: 'none'
      });
      testImageStatus.value = '请求错误: ' + JSON.stringify(err);
    }
  });
};

// 获取图片信息
const testImageInfo = () => {
  const testUrl = 'http://192.168.137.1:8080/images/product/cola.jpg';
  console.log('获取图片信息:', testUrl);
  
  uni.getImageInfo({
    src: testUrl,
    success: (res) => {
      console.log('图片信息获取成功:', res);
      uni.showToast({
        title: `宽:${res.width} 高:${res.height}`,
        icon: 'none'
      });
      testImageStatus.value = `图片信息: ${res.width}x${res.height}`;
    },
    fail: (err) => {
      console.error('图片信息获取失败:', err);
      uni.showToast({
        title: '图片信息获取失败',
        icon: 'none'
      });
      testImageStatus.value = '信息获取失败';
    }
  });
};

// 下载图片
const downloadImage = () => {
  const testUrl = 'http://192.168.137.1:8080/images/product/cola.jpg';
  console.log('下载图片:', testUrl);
  
  uni.downloadFile({
    url: testUrl,
    success: (res) => {
      if (res.statusCode === 200) {
        console.log('图片下载成功:', res.tempFilePath);
        testImagePath.value = res.tempFilePath;
        testImageSrc.value = res.tempFilePath;
        testImageStatus.value = '下载成功';
        showTestImage.value = true;
        
        uni.showToast({
          title: '图片下载成功',
          icon: 'success'
        });
      } else {
        console.error('图片下载失败:', res.statusCode);
        uni.showToast({
          title: `下载失败: ${res.statusCode}`,
          icon: 'none'
        });
        testImageStatus.value = '下载失败: ' + res.statusCode;
      }
    },
    fail: (err) => {
      console.error('图片下载错误:', err);
      uni.showToast({
        title: '下载错误',
        icon: 'none'
      });
      testImageStatus.value = '下载错误: ' + JSON.stringify(err);
    }
  });
};

// 图片加载成功
const onImageLoad = (e) => {
  console.log('图片加载成功:', e);
  testImageStatus.value = '加载成功';
};

// 图片加载失败
const onImageError = (e) => {
  console.error('图片加载失败:', e);
  testImageStatus.value = '加载失败';
};
</script>

<style>
.debug-panel {
  display: flex;
  padding: 10rpx;
  background-color: rgba(0,0,0,0.05);
  justify-content: space-around;
  margin-bottom: 10rpx;
}

.test-image-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 20rpx;
  padding: 20rpx;
  background-color: #f5f5f5;
  border-radius: 10rpx;
}

.test-image {
  width: 300rpx;
  height: 300rpx;
  background-color: #eee;
  margin-bottom: 10rpx;
}

.test-status {
  font-size: 28rpx;
  color: #666;
  margin-bottom: 10rpx;
}

/* 促销横幅样式 */
.promo-banner {
  margin: 20rpx;
  border-radius: 16rpx;
  overflow: hidden;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
}

.banner-swiper {
  height: 200rpx;
}

.banner-item {
  height: 100%;
  display: flex;
  align-items: center;
  padding: 0 40rpx;
}

.banner-1 {
  background: linear-gradient(to right, #FF6B35, #FF9F1C);
}

.banner-2 {
  background: linear-gradient(to right, #2EC4B6, #3CAEA3);
}

.banner-content {
  color: white;
}

.banner-title {
  font-size: 36rpx;
  font-weight: bold;
  margin-bottom: 10rpx;
  display: block;
}

.banner-subtitle {
  font-size: 28rpx;
  margin-bottom: 20rpx;
  display: block;
  opacity: 0.9;
}

.banner-btn {
  display: inline-block;
  padding: 10rpx 30rpx;
  background-color: rgba(255, 255, 255, 0.3);
  border-radius: 30rpx;
  font-size: 24rpx;
}
</style>